<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>热门搜索</title>
    <link rel="stylesheet" type="text/css" href="../../css/search.css" />
    <style>

    </style>
</head>

<body>
    <div id="vm">

        <div class="first1">
            <div class="search test">
                <input type="text" name="" placeholder="音乐课程|" class="search_input" v-model="keyword" @keyup.enter="searchevent(keyword)">
                <img src="../../image/home/search.png" alt="" class="img-search" v-on:click="searchevent(keyword)">
            </div>
            <div class="cancel" onclick="closeWin()">取消</div>
            <div class="clear"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>


<script type="text/javascript">
    var vm = new Vue({
        el: '#vm',
        data: {
            keyword: '',
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
                $api.fixStatusBar($api.byId('vm'))


                api.openFrame({
                    name: 'hot',
                    url: './hot.html',
                    bounces: true,
                    rect: {
                        x: 0,
                        y: 42+api.safeArea.top,
                        w: 'auto',
                        h: api.winHeight-api.safeArea.top
                    },
                    reload: true,
                    animation: {
                        type: "none", //动画类型（详见动画类型常量）
                        subType: "from_right", //动画子类型（详见动画子类型常量）
                        duration: 300 //动画过渡时间，默认300毫秒
                    }
                });
            }
        },
        methods: {
            init: function() {
                var _this = this;
                api.addEventListener({
                    name: 'clicksearchkeyword'
                }, function(ret, err){
                  _this.keyword=ret.value.keywordvalue;
                });
            },
            searchevent: function(keyword) {
                var _this = this;
                if (!keyword) {
                    api.toast({
                        msg: '请输入搜索内容',
                        duration: 2000,
                        location: 'middle'
                    });
                }else{
                  api.sendEvent({
                      name: 'searchkeyword',
                      extra: {
                          keywordcontent: keyword
                      }
                  });
                }
            },
        }
    })

    function closeWin() {
        api.closeWin();
    }
</script>

</html>
